@rootsize:19.20vw;
html {
    scroll-behavior: smooth;
}
body {
    background-color: rgb(227, 227, 227);
}
.introduce {
    display: flex;
    justify-content: space-around;
    padding: (100 / @rootsize) 0 (20 / @rootsize);
    width: 100%;
    .info {
        padding: (80 / @rootsize) 0 (55 / @rootsize) (20 / @rootsize);
        width: (1060 / @rootsize);
        color: black;
        p {
            margin: (8 / @rootsize) 0 0;
            font-size: (22 / @rootsize);
            color: rgb(63, 63, 63);
        }
    }
    .logo {
        padding-right: (20 / @rootsize);
        width: (450 / @rootsize);
        height: auto;
        max-width: 100%;
    }
}
.goods {
    margin-bottom: (30 / @rootsize);
    width: 100%;
    height: 110%;
    background-image: url(../images/background.png);
    .title {
        padding: (40 / @rootsize) 0 (48 / @rootsize) (12 / @rootsize);
        line-height: (55 / @rootsize);
        h1 {
            color: black;
        }
        p {
            font-size: (22 / @rootsize);
            color: rgb(63, 63, 63);
        }
    }
    .content {
        display: flex;
    }
    .content .left {
        margin-left: (11 / @rootsize);
        width: (750 / @rootsize);
        height: auto;
        background-color: rgb(227, 227, 227);
        box-shadow: (1 / @rootsize) (2 / @rootsize) (10 / @rootsize) (2 / @rootsize) rgba(0, 0, 0, 0.2);
        h1 {
            color: black;
            text-indent: 1vw;
        }
        p {
            font-size: (22 / @rootsize);
            color: rgb(63, 63, 63);
            text-indent: 1vw;
        }
        span {
            font-size: (33 / @rootsize);
            font-weight: 800;
            color: black;
            img {
                padding: (10 / @rootsize) (8 / @rootsize);
                width: (90 / @rootsize);
                max-width: 100%;
            }
        }
        .pic {
            position: relative;
            width: 100%;
            max-width: 100%;
            height: (750 / @rootsize);
            transition: all 5s;
            :hover {
                transform:scale(102%);
            }
            img {
                position: absolute;
                width: 100%;
                min-width: auto;
                height: 100%;
            }
            .box {
                position: absolute;
                top: 0;
                left: 0;
                padding: (17 / @rootsize) 0;
                width: (100 / @rootsize);
                background-color: rgb(0, 184, 228);
                p {
                    font-size: (30 / @rootsize);
                    color: #fff;
                    font-weight: 800;
                    text-indent: 0.98vw;
                }
            }
        }
    }
    .content .right {
        width: (1100 / @rootsize);
    }
    .content .right ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .content .right ul li {
        width: (350 / @rootsize);
        max-width: 100%;
        background-color: rgb(227, 227, 227);
        box-shadow: (1 / @rootsize) (2 / @rootsize) (10 / @rootsize) (2 / @rootsize) rgba(0, 0, 0, 0.2);
        h1 {
            color: black;
            text-indent: 1vw;
        }
        p {
            font-size: (22 / @rootsize);
            color: rgb(63, 63, 63);
            text-indent: 1vw;
        }
        span {
            font-size: (33 / @rootsize);
            font-weight: 800;
            color: black;
            img {
                padding: (10 / @rootsize) (5 / @rootsize);
                width: (70 / @rootsize);
                max-width: 100%;
            }
        }
        .pic  {
            position: relative;
            background-color: #fff;
            transition: all 5s;
            :hover {
                transform:scale(102%);
            }
            img {
                width: 100%;
            }
            .box {
            position: absolute;
            top: 0;
            left: 0;
            padding: (17 / @rootsize) 0;
            width: (100 / @rootsize);
            background-color: rgb(0, 184, 228);
            p {
                font-size: (30 / @rootsize);
                color: #fff;
                font-weight: 800;
                text-indent: 0.98vw;
            }
            }
        }
    }
}
.purchase {
        margin-left: (20 / @rootsize);
        margin-bottom: (30 / @rootsize);
    .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: (1857 / @rootsize);
        background-color: #fff;
        .head {
            img {
                width: (300 / @rootsize);
                height:(280 / @rootsize);
            }
        }
        .buy {
            margin-left: (-150 / @rootsize);
            line-height: (40 / @rootsize);
            color: black;
            h2 {
                font-size: (30 / @rootsize);
                font-weight: 400;
            }
            p {
                font-size: (22 / @rootsize);
                color: rgb(63, 63, 63);
            }
            .button:hover {
                :hover {
                    background-color: rgb(0, 184, 228);
                    color: #fff;
                }
            }
             a{
                padding: (5 / @rootsize) (100 / @rootsize);
                background-color:#fff;
                font-weight: 800;
                color: rgb(0, 184, 228);
                border: (1 / @rootsize) solid rgb(0, 184, 228);
            }
        }
        .foot img {
            width: (500 / @rootsize);
            height: (250 / @rootsize);
        }
    }
}
.way {
    margin-bottom: (5 / @rootsize);
    padding: (40 / @rootsize) 0 (48 / @rootsize) (12 / @rootsize);
        line-height: (55 / @rootsize);
    h1 {
        color: black;
    }
    p {
        font-size: (22 / @rootsize);
        color: rgb(63, 63, 63);
    }
}
.other {
    margin-left: (240 / @rootsize);
    margin-bottom: (10 / @rootsize);
    width: (1400 / @rootsize);
    background: url(../images/background.png) no-repeat;
    background-size: cover;
    .banner {
        img {
            width: 10%;
        }
    }
    a {
        display: flex;
        justify-content: space-between;
        img {
        width: 100%;
      }
    }
}
.footer {
        width: 100%; 
        background: url(../uplods/foot.jpg) no-repeat;
        background-size: cover;
        h1 {
            padding: (50 / @rootsize) 0 (20 / @rootsize);
            text-align: center;
            color: #fff;
        }
        ul {
            margin: 0 auto;
            display: flex;
            width: (260 / @rootsize);
            height: (150 / @rootsize);
        }
        ul li {
            .box {
                margin: 0 (10 / @rootsize);
                width: (100 / @rootsize);
                height: (100 / @rootsize);
                border-radius: 50%;
                border: (1 / @rootsize) solid white;
                a img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
}
.fix {
    position: fixed;
    right: 1.5%;
    bottom: 3%;
    background-color: rgb(185,185,185);
    border-radius: (5 / @rootsize);
    a {
        cursor: pointer;
    }
}